/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Input, InputLine, LineColumn, Select, Table, TableBody, TableRow, Text, useTheme,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {config设备概况} from "./orcBase";
import {useMeasureInpFilter} from "../../common/hooks";
import {useThreeColumnView} from "../../hook/useThreeColumnSubr";

const 论说选=['该锅炉本体安装经我院监检，基本按拟定的工艺及方案进行，符合相关标准规范的要求。',
  '公司余热锅炉安装由福建省工业设备安装有限公司进行安装，安装单位于2023年12月22日\n' +
  '告知，2024年3月20日进行耐压试验，2024年7月16日通过72+24小时试运行，2024年10月10日提交竣工资料。',
];

//顺手带上：证书说明
export const itemA下结论=['检验结论','检验日期','检验日期1','新下检日','结论说明','参检人员','过程概述','证书说明'];
export const Conclusion=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemA下结论,);
      const {inp, setInp} = useItemInputControl({ ref });
      const zsMlist=[inp?.结论说明??'', ];
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        <Text variant="h6">锅炉基本情况及监督检验过程概述：</Text>
        <BlobInputList value={inp?.过程概述 || ''} rows={7} datalist={论说选}
                       onListChange={v => setInp({...inp, 过程概述: v || undefined}) } />
        <Text variant="h6">报告结论页，结论说明：</Text>
        <BlobInputList value={inp?.结论说明 || ''} rows={3} datalist={[]}
                       onListChange={v => setInp({...inp, 结论说明: v || undefined}) } />
        <Text variant="h6">检验证书中间的，说明：（可附页）</Text>
        <BlobInputList value={inp?.证书说明 || ''} rows={3} datalist={zsMlist}
                       onListChange={v => setInp({...inp, 证书说明: v || undefined}) } />
        <InputLine label='参检人员：'>
          <BlobInputList value={inp?.参检人员 || ''} rows={2}
                         onListChange={v => setInp({...inp, 参检人员: v || undefined}) } />
        </InputLine>
        <InputLine  label='检验结论' >
          <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                  value={ inp?.检验结论  ||''} onChange={e => setInp({ ...inp, 检验结论: e.currentTarget.value||undefined}) }>
            <option></option>
            <option>合格</option>
            <option>不合格</option>
          </Select>
        </InputLine>
        <LineColumn column={4}>
          <InputLine label='设置检验日期'>
            <Input value={inp?.检验日期 || ''} type='date'
                   onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
          </InputLine>
          <InputLine  label='检验起始日期' >
            <Input  value={inp?.检验日期1 ||''}  type='date'
                    onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
          </InputLine>
          <InputLine  label='下次检验日期' >
            <Input  value={inp?.新下检日 ||''}  type='date'
                    onChange={e => setInp({ ...inp, 新下检日: e.currentTarget.value}) } />
          </InputLine>
        </LineColumn>
      </InspectRecordLayout>;
});

export const ConclusionVw= ({ orc, rep } : { orc: any, rep: any}
) => {
  const theme = useTheme();
  const [_,renderUpper,render2]=useThreeColumnView({orc, config:config设备概况,slash:true,split:[1,10]});
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id={'Conclusion'} variant="h2" css={{textAlign: 'center', marginTop: '1rem',
      }}>一、散装工业锅炉安装监督检验结论</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>工程名称：{orc?.工程名称}</Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["14.1%", "19%", "%", "12.1%","10%","8%"] }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'Survey'}>
          {renderUpper}
        </RepLink>
      </TableBody>
    </Table>
    <Table fixed={ ["16.1%", "10%", "%", "16.1%","16%","18%"] } css={{borderCollapse: 'collapse',}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'Survey'}>
          {render2}
        </RepLink>
        <RepLink rep={rep} tag={'Conclusion'}>
          <TableRow>
            <Cell split={true} colSpan={6}><div css={{minHeight: '4rem', whiteSpace: 'pre-wrap'}}>
              锅炉基本情况及监督检验过程概述：<br/>
              {orc.过程概述 ?? '／' }
            </div></Cell>
          </TableRow>
          <TableRow>
            <CCell colSpan={2}>检验依据</CCell>
            <CCell colSpan={4}>《锅炉安全技术规程》TSG 11-2020</CCell>
          </TableRow>
          <TableRow>
            <CCell colSpan={2}>监督检验结论</CCell>
            <CCell colSpan={4}><Text variant="h1" css={{fontSize:'1.4rem',textAlign:'center',margin:'auto'}}>{orc.检验结论 ?? '／' }</Text></CCell>
          </TableRow>
          <TableRow>
            <Cell split={true} colSpan={6}><div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
              结论说明：<br/>
              {orc.结论说明 ?? '／' }
            </div></Cell>
          </TableRow>
          <TableRow>
            <CCell>参检人员</CCell>
            <CCell colSpan={5}>{orc.参检人员 ?? '／' }</CCell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
